<div class="manager-box">
  <div class="index_page_header_container">
    <div class="index_page_header_title">{{$.lp.myAttendanceTitle}}</div>
  </div>
  <div style="margin-top: 20px;">
    <div class="my-statistic-box my-statistic-block">
      <!-- 统计周期 -->
      <div class="my-statistic-block-first">
        <div class="row-box">
          <div class="o2-icon-16" @click="this.clickToPreMonth()"><i class="o2icon-icon_arrow_left"></i></div>
          <div style="font-size: 18px;color: #333333;line-height: 20px;margin: 0 20px;">{{$.cycleMonth}}</div>
          <div class="o2-icon-16" @click="this.clickToNextMonth()"><i class="o2icon-icon_arrow_right"></i></div>
        </div>
        <div style="font-size: 12px; color: #666666; line-height: 16px;margin-top: 20px;">
          {{$.lp.myStatistic.title}}{{$.cycleDate}}</div>
      </div>
      <div class="my-statistic-block-divider"></div>
      <!-- 出勤 -->
      <div class="my-statistic-block-item">
        <div class="statistic-number">{{$.statistic.averageWorkTimeDuration}}</div>
        <div class="row-box margin-top">
          <div class="statistic-label">{{$.lp.myStatistic.averageWorkTimeDuration}}</div>
        </div>
      </div>
      <div class="my-statistic-block-divider"></div>
      <!-- 出勤 -->
      <div class="my-statistic-block-item">
        <div class="statistic-number">{{ $.statistic.workTimeDuration }}</div>
        <div class="row-box  margin-top">
          <div class="statistic-label">{{$.lp.myStatistic.workTimeDuration}}</div>
        </div>
      </div>
      <div class="my-statistic-block-divider"></div>
      <!-- 出勤 -->
      <div class="my-statistic-block-item">
        <div class="statistic-number">{{$.statistic.attendance}}</div>
        <div class="row-box  margin-top">
          <div class="item-record-status record-status-normal"></div>
          <div class="statistic-label">{{$.lp.myStatistic.attendance}}</div>
        </div>
      </div>
      <div class="my-statistic-block-divider"></div>
      <!-- 缺卡 -->
      <div class="my-statistic-block-item">
        <div class="statistic-number">{{$.statistic.absenceTimes}}</div>
        <div class="row-box  margin-top">
          <div class="item-record-status record-status-nosign"></div>
          <div class="statistic-label">{{$.lp.myStatistic.nosignTimes}}</div>
        </div>
      </div>
      <div class="my-statistic-block-divider"></div>
      <!-- 迟到 -->
      <div class="my-statistic-block-item">
        <div class="statistic-number">{{$.statistic.lateTimes}}</div>
        <div class="row-box  margin-top">
          <div class="item-record-status record-status-late"></div>
          <div class="statistic-label">{{$.lp.myStatistic.lateTimes}}</div>
        </div>
      </div>
      <div class="my-statistic-block-divider"></div>
      <!-- 早退 -->
      <div class="my-statistic-block-item">
        <div class="statistic-number">{{$.statistic.leaveEarlierTimes}}</div>
        <div class="row-box  margin-top">
          <div class="item-record-status record-status-early"></div>
          <div class="statistic-label">{{$.lp.myStatistic.leaveEarlierTimes}}</div>
        </div>
      </div>
      <div class="my-statistic-block-divider"></div>
      <!-- 请假 -->
      <div class="my-statistic-block-item">
        <div class="statistic-number">{{$.statistic.leaveDays}}</div>
        <div class="row-box margin-top">
          <div class="item-record-status record-status-leave"></div>
          <div class="statistic-label">{{$.lp.myStatistic.leaveDays}}</div>
        </div>
      </div>
      <div class="my-statistic-block-divider"></div>
      <!-- 旷工 -->
      <div class="my-statistic-block-item">
        <div class="statistic-number">{{$.statistic.absenteeismDays}}</div>
        <div class="row-box  margin-top">
          <div class="item-record-status record-status-absenteeism"></div>
          <div class="statistic-label">{{$.lp.myStatistic.absenteeismDays}}</div>
        </div>
      </div>
      <div class="my-statistic-block-divider"></div>
      <!-- 外勤 -->
      <div class="my-statistic-block-item">
        <div class="statistic-number">{{$.statistic.fieldWorkTimes}}</div>
        <div class="row-box  margin-top">
          <div class="item-record-status record-status-fieldwork"></div>
          <div class="statistic-label">{{$.lp.myStatistic.fieldWorkTimes}}</div>
        </div>
      </div>
    </div>
    <div class="my-statistic-box margin-top">
      <div class="my-cal-header">
        <div class="my-cal-header-item" oo-each="$.dayList" oo-item="day">{{day.value.name}}</div>
      </div>
      <div class="my-cal-body">
        <div class="my-cal-body-line" oo-each="$.dateWithData" oo-item="line">
          <div oo-each="line.value" oo-item="item" class="{{this.formatCalItemClass(item.value)}}">
            <div class="item-cal-date">
              <div class="{{this.formatDateClass(item.value.dateYmd)}}">{{item.value.date}}</div>
            </div>
            <div class="item-cal-record">
              <div class="item-cal-record-line">
                <div class="item-record-status bg" oo-if="item.value.detail && item.value.detail.recordList.length>0"></div>
                <div class="line" oo-if="item.value.detail && item.value.detail.recordList.length>0"></div>
                <div class="item-record-status bg" oo-if="item.value.detail && item.value.detail.recordList.length>0"></div>
              </div>
              <div class="item-record-parent" oo-if="item.value.detail">
                <div class="item-record-child margin-top" oo-each="item.value.detail.recordList" oo-item="record">
                  <div class="margin-right">
                    {{ $m.formatRecord(record.value) }}
                  </div>
                  <div class="{{this.formatRecordResultTagClass(record.value)}}">{{$m.formatRecordResultTagName(record.value)}}</div>
                </div>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </div>

</div>